

<template>
    <tm-app class="groupMembers">
        <view
            style="
                 {
                    height: systemInfo.statusBarHeight + 'px';
                }
            "
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <!-- <view class="left_box" @tap="goBack"> <image src="/static/center/back.png"  class="back"></image> </view> -->
            <view class="title">支付测试</view>
            <!-- <view class="right_box" @tap="goConfig">
                <image src="/static/center/dian.png" class="dian"></image>
            </view> -->
        </view>

        <view style="width:750rpx;border:1px solid red;position: absolute;" :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }">
            <view class="slim_box">
                <view class="row d-flex a-center j-between">
                    <text class="text">userId</text>
                    <input style="width: 300rpx" class="inp"  v-model="userId"
                        placeholder-style="color:#ccc" placeholder="请输入" type="text" />
                </view>
                <view class="row d-flex a-center j-between">
                    <text class="text">slimType</text>
                    <input style="width: 300rpx" class="inp"  v-model="slimType"
                        placeholder-style="color:#ccc" placeholder="请输入" type="text" />
                </view>
                <view class="row d-flex a-center j-between">
                    <text class="text">usertotalAmtId</text>
                    <input style="width: 300rpx" class="inp"  v-model="totalAmt"
                        placeholder-style="color:#ccc" placeholder="请输入（单位:元）" type="text" />
                </view>
                <view class="row d-flex a-center j-between">
                    <text class="text">productId</text>
                    <input style="width: 300rpx" class="inp"  v-model="productId"
                        placeholder-style="color:#ccc" placeholder="请输入" type="text" />
                </view>

                <view class="d-flex a-center j-center">
                    <button style="width:710rpx;" @tap="AdvanceOrder">
                        预支付
                    </button>
                </view>

                <view class="row d-flex a-center j-between">
                    <text class="text">商户订单号:</text>
                </view>

                <view class="sheet">
                    {{preId}}
                </view>


                <view class="d-flex a-center j-center" v-show="preId">
                    <button style="width:710rpx;" @tap="MakeOrder">
                        生成支付id
                    </button>
                </view>
                <view class="sheet">
                    {{orderId}}
                </view>


                <view class="sheet">
                    查询次数:{{checkNum}}
                </view>


                <view class="d-flex a-center j-center" v-show="orderId">
                    <button style="width:710rpx;" @tap="openPay">
                        唤起支付宝支付
                    </button>
                </view>





        </view>

        </view>

    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { advanceOrder,makeOrder,checkPayStatu } from "@/api/api";
import { updateGroupProfile } from "@/hooks/imHooks";

import { config as configStore } from "@/store/config";

import keyboardListener from "uniapp-keyboard-listener";

const systemInfo = systemInfoStore();

const userData = userDataStore();

const slimType = ref("2");
const userId = ref(userData.id);
const totalAmt = ref("");
const productId = ref("100000");

const preId = ref('');
const orderId = ref('');

const goBack = () => {
    uni.navigateBack();
};

const AdvanceOrder = async()=>{
    const params = {
        userId:userId.value,
        slimType:Number(slimType.value),
        totalAmt:Number(totalAmt.value)*100+'',
        productId:productId.value,
    }

    const res = await advanceOrder(params);
    const {flag,message} = res;
    if(flag!==1){
        uni.showToast({
            icon: "none",
            title: message,
            duration: 3000,
        });
        return 
    }

    preId.value = res.data.merOrderId;
}


const MakeOrder = async()=>{
    const params = {
        merOrderId:preId.value,
        payType:2,
    }

    const res = await makeOrder(params);
    const {flag,message} = res;
    if(flag!==1){
        uni.showToast({
            title: message,
            duration: 3000,
        });
        return 
    }

    orderId.value = res.data.payParam;

}

const checkNum = ref(0);

const checkStatu=async()=>{
    if(checkNum.value>=33){
        return;
    }

    console.log('checkStatu')
    console.log('checkStatu')
    console.log('checkStatu')
    console.log('checkStatu')
    checkNum.value +=1;
    const res = await checkPayStatu({merOrderId:preId.value})
    const {flag,message,data} = res;
    console.log(res);

    if(flag!==1){
        setTimeout(()=>{
            checkStatu();
        },2000)

        return
    }

    const { payStatus } = data;

    if(payStatus!==1&&payStatus!==2){
        setTimeout(()=>{
            checkStatu();
        },2000)

        return
    }

    uni.showToast({
            icon: "none",
            title: message||'支付成功!',
            duration: 3000,
    });

    checkNum.value = 0;

}



const openPay = async()=>{
    //checkStatu();
    uni.getProvider({
        service: 'payment',
        success: function (res) {
            console.log(res.provider)
            if (~res.provider.indexOf('alipay')) {
                uni.requestPayment({
                    "provider": "alipay",   //固定值为"alipay"
                    "orderInfo": orderId.value, //此处为服务器返回的订单信息字符串
                    success: (res)=> {
                        var rawdata = JSON.parse(res.rawdata);
                        console.log("支付成功");
                        console.log(rawdata);
                        checkStatu();
                    },
                    fail: function (err) {
                        console.log('支付失败:' + JSON.stringify(err));
                    }
                });
            }
        }
    });


}

onReady(() => {});

onLoad((option: any) => {});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupMembers {
    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        padding-top: 20rpx;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
    }
}
</style>
